<template>
  <div>
    <div>
      SPU编码：<el-input
        size="mini"
        class="cate_sel"
        v-model="spuCode"
        @keyup.enter.native="searchFn(1)"
      ></el-input>
      SPU名称：<el-input
        size="mini"
        class="cate_sel"
        v-model="spuName"
        @keyup.enter.native="searchFn(1)"
      ></el-input>
      <el-button type="primary" size="mini" @click="searchFn(1)"
        >查询</el-button
      >
    </div>
    <div class="tab_cont">
      <div style="max-height: 400px; overflow-y: auto">
        <el-table :data="spuList" ref="table" @row-dblclick="handleRowDbClick">
          <el-table-column type="selection" width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.$index"
                ><span></span
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tableColumn"
            :prop="item.key"
            :label="item.name"
            :key="index"
            :width="item.width"
          >
          </el-table-column>
        </el-table>
        <div
          class="pagination-container"
          style="text-align: right; margin-top: 20px"
          v-if="totalPage"
        >
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>
      </div>
      <div class="sel_no">
        <el-radio v-model="radio" label="-1">未搜索到SPU</el-radio>
        SPU名称：<el-input
          size="mini"
          v-model="spuNameInput"
          class="cate_sel"
          placeholder=""
        ></el-input>
      </div>
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="submitFn">确定</el-button>
      <el-button @click="cancelFn">取消</el-button>
    </div>
  </div>
</template>

<script>
import { ApiRequest } from '@api/basePage';
import paginationMixin from './paginationMixin.js';
export default {
  components: {},
  mixins: [paginationMixin],
  props: {
    categoryUuid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tableColumn: [
        { name: '类型', key: 'spuNoTypeName', width: 50 },
        { name: 'SPU编码', key: 'spuNo', width: 180 },
        { name: 'SPU名称', key: 'productName' },
        { name: '品牌', key: 'brandName', width: 120 },
        { name: '计量单位', key: 'mainUnitName', width: 100 },
        { name: '归类名称', key: 'classificationName', width: 100 }
      ],
      apiObj: {
        // 查询spu
        getPagerBySpu: {
          url: '/sysback/product/collect/getPagerBySpu',
          type: 'post' // 接口请求类型
        }
      },
      spuList: [],
      spuCode: '',
      spuName: '',
      selectioned: '',
      radio: -2,
      spuNameInput: ''
    };
  },
  computed: {},
  created () {},
  methods: {
    searchFn (curPage) {
      if (curPage) {
        this.currentPage = curPage
      }
      let data = {
        spuNo: this.spuCode,
        spuName: this.spuName,
        nowPage: this.currentPage,
        pageShow: this.pageSize,
        categoryUuid: this.categoryUuid,
        type: 3
      };

      ApiRequest(
        this.apiObj.getPagerBySpu.url,
        this.apiObj.getPagerBySpu.type,
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1' && res.retData && res.retData.results) {
          this.spuList = res.retData.results.map((item) => {
            item.spuNoTypeName = item.spuNoType == 1 ? '正常' : '临采';
            return item;
          });
          this.totalPage = res.retData.totalNum;
        }
      });
    },
    handleRowDbClick (row) {
      let curSpu = null;
      let cateL = row.categoryPath.split('>');
      curSpu = {
        spuNo: row.spuNo,
        spuName: row.productName,
        spuNoType: row.spuNoType,
        brandName: row.brandName,
        brandUuid: row.brandUuid,
        unitName: row.mainUnitName,
        unitUuid: row.mainUnitUuid,
        categoryName: cateL[3],
        categoryUuid: row.categoryUuid,
        otherSpuName: '',
        otherSpuNo: '',
        otherBrandName: ''
      };
      if (this.categoryUuid == '') {
        curSpu.classificationName = row.classificationName;
        curSpu.classificationUuid = row.classificationUuid;
      }
      this.$emit('submitConcat', curSpu);
      this.radio = -2;
      this.spuList.length = 0;
      this.totalPage = 0;
    },
    submitFn () {
      if (this.radio == -2) {
        this.$message({
          type: 'error',
          message: '请选择spu！'
        });
        return;
      }
      if (this.radio == -1 && this.spuNameInput == '') {
        this.$message({
          type: 'error',
          message: '请输入spu名称！'
        });
        return;
      }
      let curSpu = null;
      if (this.radio == -1) {
        curSpu = {
          otherSpuName: this.spuNameInput,
          otherSpuNo: '',
          spuNo: '',
          spuName: '',
          spuNoType: '2'
        };
      } else {
        let curOjb = this.spuList[this.radio];
        let cateL = curOjb.categoryPath.split('>');
        curSpu = {
          spuNo: curOjb.spuNo,
          spuName: curOjb.productName,
          spuNoType: curOjb.spuNoType,
          brandName: curOjb.brandName,
          brandUuid: curOjb.brandUuid,
          unitName: curOjb.mainUnitName,
          unitUuid: curOjb.mainUnitUuid,
          categoryName: cateL[3],
          categoryUuid: curOjb.categoryUuid,
          otherSpuName: '',
          otherSpuNo: '',
          otherBrandName: ''
        };
        if (this.categoryUuid == '') {
          curSpu.classificationName = curOjb.classificationName;
          curSpu.classificationUuid = curOjb.classificationUuid;
        }
      }
      this.$emit('submitConcat', curSpu);
      this.radio = -2;
      this.spuList.length = 0;
      this.totalPage = 0;
    }
  }
};
</script>
<style lang="less" scoped>
.cate_sel {
  width: 200px;
  margin-right: 20px;
}
.tab_cont {
  margin: 20px 0;
}
.sel_no {
  margin: 20px 0;
  margin-left: 13px;
}
/deep/ .has-gutter .el-checkbox {
  display: none;
}
</style>
